<template>
  <div id="sys">
    <cmlpanel ref="setting">
      <div id="con">
        <App></App>
        <modal></modal>
      </div>
    </cmlpanel>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import App from '@/App'
import modal from '@/assets/js/app/message/modal'
export default {
  data() {
    return {
      flag: false
    }
  },
  created() {},
  mounted() {
    // 页面适配
    this.pageAdapt = app.sizeAdaptServer.create({
      wrapSelector: '#con',
      domSelector: '#app',
      sizeEqualRatio: true,
      w: (App.pageSize && App.pageSize.width) || 1920,
      h: (App.pageSize && App.pageSize.height) || 1080
    })
    // modal适配
    this.modalAdapt = app.sizeAdaptServer.create({
      wrapSelector: '#con',
      domSelector: '#modalWrapper',
      sizeEqualRatio: true,
      w: (App.pageSize && App.pageSize.width) || 1920,
      h: (App.pageSize && App.pageSize.height) || 1080
    })
    this.pageAdapt.resize()
    this.modalAdapt.resize()
    // 初始化加载
    app.$on('init', () => {
      if ([...document.querySelectorAll('.anov-part')].length == 0) {
        document.getElementById('appLoading').style.display = 'none'
        app.log('no anov-part')
      } else {
        this.init()
      }
    })
  },
  computed: {
    ...mapState('cmlpanel', ['isPanelOpen']),
    ...mapState('soundServer', ['isSoundOpen', 'soundsType']),
    ...mapState('dataSource', ['type'])
  },
  watch: {
    isSoundOpen(v) {
      if (v) {
        app.soundServer.play({
          type: 'bgm',
          duration: -1
        })
      } else {
        app.soundServer.stop()
      }
    },
    soundsType(v) {
      app.soundServer.play({
        type: 'bgm',
        duration: -1
      })
    },
    isPanelOpen(v) {
      setTimeout(() => {
        this.pageAdapt.resize()
        this.modalAdapt.resize()
      }, 300)
    },
    type(v) {
      if (this.flag) return
      this.flag = true
      app.root.$once('dataReady', () => {
        let tlEnter = app.animateServer.getCurrentRouteTl('enter')
        if (tlEnter) tlEnter.clear(false)
        this.changeVueKey()
        this.$nextTick(() => {
          app.partServer.getCompByTagName('anovPage')[0].enter()
        })
        this.flag = false
      })
    }
  },
  methods: {
    ...mapMutations(['changeVueKey']),
    init() {
      app.root.$once('dataReady', () => {
        app.envServer.initStatus()
        app.soundServer.play({ type: 'bgm', duration: -1 })
        document.getElementById('appLoading').style.display = 'none'
        app.partServer.getCompByTagName('anovPage')[0].enter()
      })
      app.$on('pageEnter', e => {
        // 有待改进
        let path = e.to.path
        app.api.init(path)
        app.partServer.getCompByTagName('anovPage')[0].enter(e)
      })
      app.$on('pageLeave', e => {
        app.partServer.getCompByTagName('anovPage')[0].leave(e)
      })
      app.log('anovPart 初始化')
    }
  },
  components: { App, modal }
}
</script>

<style lang="scss" scoped>
#sys {
  position: absolute;
  height: 100vh;
  width: 100vw;
  display: flex;
}
#con {
  height: 100%;
  flex: 1;
  position: relative;
  background: #181e24;
  background-size: cover;
}
#top-menu {
  z-index: 10;
}
.pop-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
